<template>
  <div class="leftsider_pane">
    <div class="pane_name">
      <span>数据查询</span>
      <button class="pane_close" @click="close"></button>
    </div>
    <select>
      <option>二维平面类</option>
      <option>三维立体类</option>
      <option>点及文字</option>
      <option>小模型</option>
    </select>
    <button @click="drawPoint">画点</button>
    <div class="message_area">
      <div class="class_title">-坐标列表</div>
      <div class="mp_attr">
        <table>
          <tbody>
          <tr>
            <td class="nametd">经度：</td>
            <td><input type="number" class="mp_input plot_lng" data-type="jd" value=""></td>
          </tr>
          <tr>
            <td class="nametd">纬度：</td>
            <td><input type="number" class="mp_input plot_lat" data-type="wd" value=""></td>
          </tr>
          <tr>
            <td class="nametd">高程：</td>
            <td><input type="number" class="mp_input plot_alt" data-type="height" value=""></td>
          </tr>
          </tbody>
        </table>
      </div>
      <div style="margin-top:10px;text-align:center">
        <button id="btnCenter" type="button" class="btn btn-primary">定位</button>
      </div>
    </div>
  </div>
</template>

<script>
    //import $ from '@/js/jquery-1.8.2.min.js'
    export default {
        name: "position",
        methods:{
          close: function () {
            this.$emit('closePane', false);
          },
          drawPoint:function () {
            var _this = this.$parent.$parent;
            var Cesium = this.$parent.$parent.Cesium;
            var CesiumAPI = this.CesiumAPI;
            var handler = new Cesium.ScreenSpaceEventHandler(this.$parent.$parent.viewer.scene.canvas);
            //坐标存储
            var positions = [];
            //单击鼠标左键画点
            handler.setInputAction(function (movement) {
              var cartesian = _this.viewer.scene.camera.pickEllipsoid(movement.position, _this.viewer.scene.globe.ellipsoid);
              var cartographic=Cesium.Cartographic.fromCartesian(cartesian);
              var lng=Cesium.Math.toDegrees(cartographic.longitude);//经度值
              var lat=Cesium.Math.toDegrees(cartographic.latitude);//纬度值
              debugger;
              positions.push(cartesian);
              var point = {
                position: cartesian,
                point: {
                  color: Cesium.Color.RED,
                  pixelSize: 25,
                  heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
                }
              };
              CesiumAPI.CreateObj.createPoint('test',_this.viewer,point,function (item) {
                debugger;
                //$('.plot_lng').val(item.point.position.x);
                //$('.plot_lat').val(item.point.position.y);
                //$('.plot_alt').val(item.point.position.z);
              });
              handler.destroy();
            }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
          }
        }
    }
</script>


<style scoped>
  /*.leftsider_pane {*/
    /*position: absolute;*/
    /*top: 0;*/
    /*left: 60px;*/
    /*width:250px;*/
    /*height: 100%;*/
    /*background-color:rgba(28,28,29,.9);*/
    /*border-radius:2px;*/
  /*}*/
  .pane_name {
    border:1px #38535e solid;
    border-radius:2px;
    height:30px;
    line-height:30px;
    color:#ffffff;
    font-size:14px;
    text-indent:10px;
  }
  .pane_close {
    float:right;
    margin:9px;
    width:10px;
    height:10px;
    background:url(../../../static/IMG/leftsider/取消.png) center no-repeat;
    border:none;
    cursor:pointer;
    outline: none;
  }

  select {
    background-color:rgba(28,28,29,.1);
    border-radius: 2px;
    color: #ffffff;
    font-size: 14px;
    margin-top: 10px;
    margin-left: 20px;
    height: 30px;
    line-height: 30px;
    padding: 0 5px;
  }
  option {
    height: 30px;
    line-height: 30px;
    padding: 0px 5px;
    cursor: pointer;
    background:rgba(28,28,29,.9);
  }
  .message_area {
    margin-top:10px;
  }
  .class_title {
    height: 30px;
    line-height: 28px;
    background: #1c3b3a;
    cursor: pointer;
    color: #ffffff;
    font-size: 14px;
    text-indent: 10px;
  }
  .mp_attr table tr td:first-child {
    border-left: #cde1de 1px solid;
  }
  .mp_attr table {
    width: 100%;
    border: 0;
    font-size: 12px;
    color: #ffffff;
  }
  .mp_attr .nametd {
    width: 40%;
  }
  .mp_attr table tr td {
    padding: 5px 5px 5px 10px;
    text-align: left;
    border: #cde1de 1px solid;
  }
  .mp_input {
    height: 28px;
    line-height: 22px;
    padding: 3px 5px;
    box-sizing: border-box;
    font-size: 12px;
    border: 1px solid #e6e6e6;
    background-color: rgba(63,72,84,.6);
    border-radius: 3px;
    display: block;
    width: 100%;
    outline: 0;
    box-sizing: border-box;
    color: #ffffff;
  }
  .btn {
    padding: 4px 12px;
    font-size: 14px;
    line-height: 1.6;
    border-radius: 3px;
    -webkit-transition: border .2s linear,color .2s linear,width .2s linear,background-color .2s linear;
    -o-transition: border .2s linear,color .2s linear,width .2s linear,background-color .2s linear;
    transition: border .2s linear,color .2s linear,width .2s linear,background-color .2s linear;
    outline: none;
    border: none;
    cursor: pointer;
  }
  .btn-primary {
    color: #fff;
    background-color: rgba(32,160,255,.2);
    border-color: #20a0ff;
  }
</style>
